<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简单的适配方案</title>
  <style>
    *{
      padding:0;
      margin:0;
      box-sizing:border-box;
    }
    .header-container{
      /* 1rem = 37.5px 375px = 10rem  375/x = 37.5/1*/
      /* 750/10 = 50/x */
      width:100%;
      height:2.5rem;
      background-color:rgba(222,24,27,0.9);
    }
    .main-container{
      padding:2.5rem 0;
      background-color:#eee;
    }
    .slider-container{
      height:9.15rem;
      background:lightsteelblue;
    }
    .tabbar-container{
      height:2.5rem;
      background-color:lightslategray;
    }

    html,body{
      width:100%;
      height:100%;
    }
    .header-container,
    .tabbar-container{
      position:fixed;
      left:0;
      width:100%;
      z-index:999;
    }
    .header-container{
      top:0;
    }
    .tabbar-container{
      bottom:0;
    }
  </style>
</head>
<body>
  <header class="header-container"></header>

  <div class="main-container">
    <div class="slider-container"></div>
  </div>

  <div class="tabbar-container"></div>
  <script>
    // var a = document.documentElement.getBoundingClientRect().width || window.innerWidth
    // console.log(a)

    // setRemUnit()
    // window.addEventListener('resize', setRemUnit)

    // function setRemUnit(){
    //   var docEl = document.documentElement;
    //   var ratio = 18.75;
    //   var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth

    //   docEl.style.fontSize = viewWidth / ratio + 'px'
    // }
  </script>

  <script src="simple.js"></script>
</body>
</html>